import React, {Component} from 'react';
import {StyleSheet, View, Image, KeyboardAvoidingView, StatusBar} from 'react-native';
import {Item, Input, Button, Text} from 'native-base';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {connect} from 'react-redux';
import {themeColor, themTextColor} from '../../../config/config';
import DoubleExitApp from './LoginPage/DoubleExitApp';

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	offsetTopContainer: {
		flex: 1, 
		flexDirection: 'row', 
		justifyContent: 'center',
	},
	logoContainer: {
		flex: 1, 
		flexDirection: 'row', 
		justifyContent: 'center',
		alignItems: 'center',
		
	},
	logoWarp: {
		height: 110,
		width: 110,
		borderRadius: 55,
		backgroundColor: themeColor(),
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
	},
	logoImage: {
		flex: 0.9,
		height: 80,
		width: 80,
		borderRadius: 40,
	},
	inputContainer: {
		flex: 7,
		flexDirection: 'row', 
		justifyContent: 'center',
		marginTop: 40,
		
	},
	inputWarp: {
		flex: 0.9,
	},
	inputItem: {
		marginTop: 5,
	},
	
	loginButton: {
		backgroundColor: themeColor(),
		marginTop: 20,
		height: 45,
	},
	loginButtonText: {
		color: themTextColor(),
		fontSize: 20,
		lineHeight: 45,
	},
	moreContainer: {
		flexDirection: 'row',
		marginTop: 15,
	},
	forgetPasswordWarp: {
		flex: 1,
		color: '#595959',
	},
	registerWarp: {
		flex: 1,
		textAlign: 'right',
		color: '#595959',
	},
});

@connect(state => ({state: {...state.login}}))
class LoginPage extends Component {
    
    render() {
    	let {state, dispatch} = this.props;
        return (
        	<KeyboardAvoidingView style={styles.container} behavior='padding'>
        		<StatusBar animated={true} translucent={true} barStyle='dark-content' />
        		<DoubleExitApp />
        		<View style={styles.offsetTopContainer} />
        		<View style={styles.logoContainer}>
        			<View style={styles.logoWarp}>
	        			<Image style={styles.logoImage} source={require('../../../assets/img/logo-transparent.png')} />
        			</View>
        		</View>
        		<View style={styles.inputContainer}>
        			<View style={styles.inputWarp}>
	        			<Item style={styles.inputItem}>
			        		<Input placeholder='用户名/邮箱' onChangeText={(text) => {
			        			dispatch({
					       			type: 'login/changeAccount',
					       			payload: text,
					       		})
			        		}} />
			        	</Item>
	        			<Item style={styles.inputItem}>
	            			<Input placeholder='密码' secureTextEntry onChangeText={(text) => {
			        			dispatch({
					       			type: 'login/changePassword',
					       			payload: text,
					       		})
			        		}} />
	        			</Item>
	        			<Button style={styles.loginButton} block rounded onPress={() => {
				       		dispatch({
				       			type: 'login/login',
				       		})
				        }}>
					    	<Text style={styles.loginButtonText}>登录</Text>
				        </Button>
				        <View style={styles.moreContainer}>
				        	<Text style={styles.forgetPasswordWarp}>忘记密码</Text>
				        	<Text style={styles.registerWarp}>立即注册</Text>
				        </View>
        			</View>
        		</View>
        	</KeyboardAvoidingView>
        );
    }
    
    componentWillMount() {
    	this.props.dispatch({type: 'login/checkLogin'});
    }
    
}

export default LoginPage;